@use '../variables.scss' as *;

// 侧边栏选中菜单背景色
@mixin active-menu-color-after($height) {
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: $height;
    width: 2px;
    background-color: $primary-color;
  }
}

// 亮色主题
#app {
  .app-wrapper[data-theme='light'] {
    .sidebar-container {
      background-color: $light-sidebar-bg !important;
    }

    .el-menu-item {
      position: relative;
      color: $text-content-color !important;

      &.is-active {
        background-color: $light-menu-active-bg-color !important;
        color: $primary-color !important;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: $primary-color;
        }
      }
    }

    .el-sub-menu {
      position: relative;

      &.is-active {
        @include active-menu-color-after(auto);
      }
    }

    &.hideSidebar {
      .el-sub-menu {
        position: relative;

        &.is-active {
          .svg-icon {
            color: $primary-color;
          }

          @include active-menu-color-after(100%);
        }
      }
    }
  }
}
